<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0 ;
            padding: 0;
        }
        .box1{
            height: 800px;
            width: 800px;
            background-color: silver;
            overflow: hidden;
            margin-left: 0;
        }
        .box1 div{
            width: 100px;
            height: 100px;
            margin-bottom: 100px;
        }
        .box2{
            background-color: #bfa;
            /* transition: all 2s; */
            /* 
                过渡（transition）
                -通过过渡可以指定一个属性发生变化时的切换方式
                -通过过渡可以创建一些非常好的效果，提升用户的体验
            */
            /* 
                transition-property:指定要执行过渡的属性
                多个属性使用逗号隔开
                如果所有属性都需要过渡，则使用all关键字
                大部分属性都支持过渡效果，注意使用过渡时必须从一个有效数值向另一个有效数值进行过渡
                
            */
                /* transition-property: all; */
              
            /* 
                transition-duration:指定过渡效果的持续时间
            */
            /* transition-duration: 2s; */
            /* transition-timing-function :过渡的时序函数
            指定过渡的执行方式
            可选值：
            ease 默认值，慢速开始，先加速，再减速
            linear 匀速运动
            ease-in 加速运动
            ease-out 减速运动
            ease-in-out 先加速后减速
            cubic-bezier() 来指定时序函数
            https://cubic-bazier.com
            steps() 分部执行过渡效果
            可以设置一个第二个值：
            end:在时间结束时执行过渡（默认值）
            start;在时间开始时执行过渡
            */
            /* transition-timing-function: steps(2,start); */
            /* transition-delay :L过渡效果的延迟，等待一段时间后才开始执行
            */
            /* transition-delay: 2s; */
            /* transition：可以同时设置过渡相关的所有属性，只有一个要求，如果要写延迟，则两个时间里的第一个时间是持续时间，第二个时间才是延迟 */
            transition:2s margin-left ls cubic-bezier(.24,.05,.82,0.88);
        
        }
        .box3{
            background-color: orange;
            transition-property: all;
            transition-duration: 2s;
        }
        .box1:hover div{
            /* width: 200px;
            height: 200px; */
            margin-left: 700px;

        }
    </style>

</head>
<body>
    <div class="box1">
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>
</html>